<template>
  <div class="indocator">
    <div class="control">
      <span>{{selectIndex}}</span>
      <button @click="() => toggleClickHandle(false)">上一个</button>
      <button @click="() => toggleClickHandle(true)">下一个</button>
    </div>
    <div class="list">
      <mala-indicator :selectIndex="selectIndex">
        <button v-for="item in names" :key="item">{{ item }}</button>
      </mala-indicator>
    </div>
  </div>
</template>

<script setup>
import { ref } from "vue"
// 组件状态
const names = ["李亮", "李一鸣", "李志源", "陈析晰", "杨一帆", "杨楠", "李东汭"]
const selectIndex = ref(0)

// 事件处理逻辑
const toggleClickHandle = (isNext) => {
  let index = isNext ? selectIndex.value + 1 : selectIndex.value - 1
  if (index < 0) index = names.length - 1
  if (index > names.length - 1) index = 0
  selectIndex.value = index
}
</script>

<style scoped>
.list {
  width: 150px;
}
</style>